<template>
	<div class="login-wrap">
		<div class="login-main">
			<div class="login-left">
				<div class="login-left-title">AI爱招聘</div>
			</div>
			<div class="login-right">
				<div class="login-right-welcome">欢迎登录</div>
				<div class="login-right-welcome-title">AI爱招聘</div>
				<div class="login-right-img">
					<div class="login-tab">
						<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
							<el-tab-pane label="微信扫码登录" name="first"></el-tab-pane>
							<el-tab-pane label="账号密码登录" name="second"></el-tab-pane>
						</el-tabs>
					</div>
					<div class="imgClass" v-if="activeName == 'first'" style="margin-top: 5%;">
						<!-- <el-image v-loading="loading" class="login-right-img-src"  :lazy="true" :src="imageSrc"
							alt="Base64图像"></el-image> -->
                            <!-- <img class="login-right-img-src" :src="imageSrc"> -->
							<!-- <qrcode-vue :value="imageSrc" :size="300"></qrcode-vue> -->
							<div class="canvas_div">
								<canvas ref="qrCodeCanvas" width="400" height="400"></canvas>
							</div>
							<div class="login-right-img-please">请打开微信扫一扫</div>
					</div>
					<div v-if="activeName == 'second'">
						<el-form  ref="login" label-width="0px" class="ms-content">
							<el-form-item prop="username" style="margin-bottom: 40px;">
								<el-input v-model="passport" type="tel" placeholder="请输入账号"></el-input>
							</el-form-item>
							<el-form-item prop="password">
								<el-input type="password" placeholder="请输入密码" v-model="password"></el-input>
							</el-form-item>
							<el-form-item>
                                <div class="pwd_div">
                                    <el-checkbox v-model="rememberPassword">记住密码</el-checkbox>
                                    <div class="nocount" @click="toRegister">
                                        <span>立即注册</span>
                                    </div>
                                </div>
								
							</el-form-item>
							<div class="login-btn">
								<el-button @click="submitForm(login)">登录</el-button>
							</div>
						</el-form>
					</div>
				</div>

			</div>


		</div>
	</div>
</template>
<script >
 import homeapi from '@/api/api.js'
 import QRCode from 'qrcode'
 import until from '@/api/until'
export default {
        name: 'login',
        data(){
            return{
                phone:"",
                haveCheck:false,
                imageSrc:"",
                login:"",
                activeName:'first',
                passport:"",
                password:"",
                rememberPassword:false,
				qrCodeId:"",
				timeOut:true,
            }
        },
        components: {
        
        },
		mounted(){
			this.getLoginCode();
		},
        methods:{
            async sendCode(){
                let phone=this.phone
                this.$toast.loading({
                    title:"加载中...",
                    
                })
                let data=await homeapi.sendCode({phone});
                console.log(data)
                if(data.code==200){
                    this.$toast.clear();
                    this.$router.push("/code?phone="+phone)
                }
                else if(data.code==500){
                    this.$toast.clear();
                    this.$router.push("/code?phone="+phone)
                }
            },
            setCheck(){
                this.haveCheck=true;
            },
            handleClick(type){
                console.log(type)
                this.activeName=type.name
            },
            toRegister(){
                this.$router.push("/login")
            },
			//获取登录二维码
			async getLoginCode(){
				let type=1;
				let data=await homeapi.getLoginCode({type})
				if(data.code==200){
					this.imageSrc=data.result.qrCodeUrl
					this.qrCodeId=data.result.qrCodeId
					this.generateQRCode();
					this.getCodeResult();
				}
			},
			generateQRCode() {
				const canvas = this.$refs.qrCodeCanvas;
				QRCode.toCanvas(canvas, this.imageSrc, {
					width: 400, // 设置二维码的宽度
					height:400,
					margin: 1, // 设置二维码周围的空白边距
				}, (error) => {
					if (error) console.error(error)
					console.log('QR Code generated');
				});
			},
			//获取扫码登录结果
			async getCodeResult(){
				let qrCodeId=this.qrCodeId
				let data=await homeapi.getCodeResult({qrCodeId})
				if(data.code==200){
					if(data.result.token){
						until.setCookie("token",data.result.token)
						this.getUserInfo();
					}	
					else{
						setTimeout(() => {
							this.getCodeResult();
						}, 2000);
					}
				}
			},
			async getUserInfo(){
				let data=await homeapi.getUserinfo();
				if(data.code==402){
					this.$router.push("/loginindex")
					// window.location.href=`https://${window.location.hostname}/mobile/#/login`
				}
				if(data.code==403){
                    this.$router.push("/company")
					// window.location.href=`https://${window.location.hostname}/mobile/#/company`
				}
				if(data.code==200){
					this.$router.push("/")
				}
				
			}
        }
    }
</script>

<style scoped lang="less">
.login-wrap {
	position: relative;
	width: 100%;
	height: 100%;
	background-image: url(@/assets/imgs/login-bg.png);
	background-size: 100% 100%;
}

.login-main {
	position: absolute;
	top: 20%;
	left: 20%;
	width: 60vw;
	background: #fff;
	border-radius: 20px;
	height: 64%;
	display: flex;
	align-items: center;
}

.login-left {
	height: 100%;
	width: 50%;
	height: 100%;
	background: #85d742;
	background-size: 100% 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	border-radius: 20px 0 0 20px;
}

.login-left-title {
	font-size: 24px;
	font-weight: bold;
	color: #fff;
	padding-top: 100px;
}

.login-right {
	flex: 1;
	box-sizing: border-box;
	height: 100%;
}

.login-right-welcome {
	font-size: 28px;
	font-weight: bold;
	padding-left: 20%;
	margin-bottom: 10px;
	margin-top: 10%;
}

.login-right-welcome-title {
	font-size: 20px;
	font-weight: bold;
	padding-left: 20%;
	color: #00C853;
	margin-bottom: 10%;
}

.login-right-img {
	margin-top: 0.4rem;
	padding-left: 16%;
	width: 100%;
	box-sizing: border-box;
}

.login-right-img-title {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 40px;
}

.login-right-img-src {
	width: 300px;
	height: 300px;
	margin-bottom: 20px;
}

.ms-title {
	width: 100%;
	line-height: 50px;
	text-align: center;
	font-size: 20px;
	color: #fff;
}

.ms-login {
	position: absolute;
	left: 20%;
	top: 50%;
	width: 850px;
	border-radius: 20px;
	overflow: hidden;
}

.ms-content {
	width: 72%;
	padding: 30px 30px;

	.el-input {
		height: 50px;
	}
}

.login-btn {
	text-align: center;
}

.login-btn button {
	width: 100%;
	height: 50px;
	margin-bottom: 10px;
	background: linear-gradient(89deg, #FFCC00 0%, #00C853 100%);
	border-radius: 4px 4px 4px 4px;
	opacity: 1;
	color: #fff;
	font-size: 20px;
	font-weight: bold;
}

.login-tips {
	font-size: 12px;
	line-height: 30px;
	color: #fff;
}

:deep(.el-tabs__nav-wrap)::after {

	height: 0px;

}

:deep(.el-tabs__item) {
	font-size: 20px;

}

:deep(.el-tabs__item.is-active) {
	font-weight: bold;
	color: black !important;
}

.login-tab {
	margin-left: 30px;
}

.login-right-img-please {
	font-size: 22px;
	font-weight: 400;
	color: #00C853;
	margin-left: 5%;
}

.imgClass {
	width: 100%;
	margin-left: 10%;
}
.nocount{
    font-size: 14px;
    color: #FFCC00;
    margin-left: 30px;
}
.pwd_div{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.canvas_div{
	width: 300px;
	height: 300px;
}
.canvas_div canvas{
	width: 100%;
	height: 100%;
}
</style>
